<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 实例详解</title>
  <script src="../libs/vue.js"></script>
</head>
<body>
  <div id="app">
     <h2 ref="one">Vue 实例对象 (vm)</h2>
     <h2 @click="count++">count === {{count }}</h2>
     <h2 >
       <input type="text" v-model="msg">
     </h2>
     <h2 ref="two">a={{a}}  b= {{b}}</h2>
     <h2>c == {{c}}</h2>
     <button @click="$destroy()">销毁实例</button>
  </div>

  <script>
    // 选项对象 
    // 选项属性 
    var index = 0;
    console.log(Vue)
    var data = {
        count:2000,
        msg:"daydayup",
        a:1,
        b:2000,
        c:'1234'
    }
    // Object.freeze(data)   // v-once 冻结 
    const vm = new Vue({
      // el:"#app",
      data:data,
      methods: {
        log(msg){
          console.log(` ##${++index} -- ${msg}  `)
        }
      },
      // document.onready 
      beforeCreate() {
        console.log(this)  // 方法和属性都没有绑定起来 
        // this.log("beforeCreate - 实例被创建之前 ")
        console.log(` ##${++index} -- beforeCreate - 实例被创建之前   `)
      },
      created(){
        console.log(this.a)
        this.log("created - 实例被创建完成 ")
      },
      beforeMount(){
        // 虚拟DOM ?  
        console.log(this.$refs.one)
        // this.$refs.one.style.color = "red"
        this.log("beforeMount - 实例被载入之前 ")
      },
      // window.onload 
      mounted(){
        // 真实DOM  
        // 插件实例化  Swiper 
        this.$refs.one.style.color = "red"
        this.$refs.two.style.background = "yellow"
        this.log("mounted - 实例载入完成  ")
      },
      beforeUpdate(){
        this.log("beforeUpdate -  数据发生改变")
      },
      updated(){
        // this.a++;
        this.log("updated -  数据发生改变完成了")
      },
      beforeDestroy() {
        this.log("beforeDestroy - 实例被销毁之前 ")
      },
      destroyed() {
        // 清除计数器  
        // 垃圾回收  
        this.log("destroyed - 实例已经被完成销毁 ")
      },


      name:"",
      watch:{},
      computed:{},
      directive:{},
      filter:{},
      components:{},
      mixins:[],
    }).$mount("#app")  // 载入到 div#app 里面 
    console.log(vm.$data)
    console.log(vm.$el)
    vm.$watch("a",function(newVal,oldVal){

    })
    // 浅拷贝 
    // data.a = 200
    // 200
    // vm.b = 1000 
    // 1000
    // data.b
    // 1000
    // vm.a == data.a
    // true
    // vm.b ==  data.b
    // true
    // vm.b ===  data.b
    // true
  </script>
      <!-- 
    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
    设计模式  (工厂模式  单例模式  混合模式  观察者模式  发布订阅模式 )
    
    数据开发模式模型 
    MVVM  M  model 数据模型  V  view 视图界面  VM  viewmodel  视图和数据混淆在一起(数据视图系统)
    MVC   M  model 数据模型  V  view 视图界面  C   controller 控制器 (JS逻辑 方法和事件)  (Angular)
    MVP   M  model 数据模型  V  view 视图界面  P   Prestener  复杂逻辑   
    

    选项对象   {} 
    选项对象属性 (data el  methods name watch computed filter component directive 10个生命周期钩子函数) 
    
    vm 
    实例对象  vm   Vue.prototype   vm.__proto__ 
    实例属性  vm.$data  vm.$el  
    实例方法 / 数据    vm.$watch    vm.$set
    实例方法 / 事件   vm.$emit     vm.$on    
    实例方法 / 生命周期   vm.$nextTick  vm.$mount()   vm.$forceUpdate (强制刷新页面)
    el  vue挂载元素  $mount("#app") 
    
    data 对象 
    响应式系统  (只要检测到数据更新,就一定会去修改视图 )    组件系统 
    1. 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中
    2. 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值 (响应式)
    
    vm 实例化后赋值  没有意义  没有被响应式视图系统监听
    
    所有需要用到的数据都必须在data 里面初始化 否则没有响应式监听 
    借鉴 MVVM
    
    VM 实例对象  
    实例属性 
    vm.$el     
    vm.$data    
    实例方法  
    vm.$watch  监听数据改变
    vm.$set    修改对象和数据刷新视图
    vm.$delete  删除对象和数组 刷新视图   
    vm.$mount()
    vm.$destroy()  销毁 
    vm.$forceUpdate
    vm.$nextTick
    
    ref  用来记录真实DOM  this.$refs 
    a. ref 用于标签 表示这个真实DOM 对象
    b. ref 用于组件 表示这个组件对象 
    
    初始化操作  
    document.ready = function(){}
    window.onLoad = function(){}
    
    $(function(){
    
    })
    
    实例生命周期钩子 
    每个 Vue 实例在被创建时都要经过一系列的过程
    (实例创建  实例载入  实例更新  实例销毁 )
    这些过程称为 实例生命周期   Vue 会在这个每个周期设置对应的函数去监听  这些函数就叫  生命周期钩子函数(HOOKS)
    Vue 内置一些生命周期钩子函数(function )   给了开发者在不同阶段添加自己的代码的机会
    
    实例创建   beforeCreate   created   1       实例初始化创建 
    实例载入   beforeMount    mounted   1       初始化载入
    实例更新   beforeUpdate   updated   n       实例 里面  data  数据改变 
    实例销毁   beforeDestroy  destroyed  1      实例被移除 
    
    activated       激活
    deactivated     失活  
    errorCaptured  错误捕获 
    
    
    真实DOM  ref 
    Vue  创建实例之前 DOM树 先读取根元素 解析 所有的dom数据标签  然后以  树形结构 把dom数据存储在内存 (模板存储DOM)
    在内存中 描述 dom节点 的 数据信息  叫做 虚拟DOM 
    抽象定义 
    虚拟DOM  Virtual DOM   (性能优化)     
    
    优势  提升性能 提高加载速度 
    缺点  多了一次 虚拟DOM 初始化的计算 (尽量第一次不要加载过多的数据 )
    
    数据更新 patch  diff算法  比较不同    性能优化  
    
    如果每次data 改变 也就是数据更新  
    Vue (核心DIfferent 算法) 监测到数据改变  自动生成 新的虚拟DOM  
    
    会去和 旧的虚拟DOM 进行对比  得到变更的部分 patch 
    然后会把这 patch 放到一个队列  最终批量更新  渲染成真实DOM   
  
  -->
</body>
</html>